<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="../js/vue.js"></script> -->
    <script src="../js/echarts.min.js"></script>
    <title>Document</title>
    <style>
       #box { width:1000px; height:600px; } 
    </style>
</head>
<body>
    <h1>运气和财富 </h1>
    <div id="box"></div>
</body>
<script>
/**
 * 设计一个虚拟的世界， 有1000个小人，每个人都有一个能力值 0-1 之间的小数，
 * 大部分都在0.3-0.8之间。起始设置  年龄20岁，财富10
    随机事件 250个 幸运，250个不幸 
    遇到红点有几率财富*2 ，看能力值决定
    遇到绿点  财富/2  不看能力
 */ 

var x = [ ];
var y = [ ];
var world=[ ];
var ci =0 ; 
var year =0 ;
var h1 = document.querySelector('h1');

// 初始化100个人 
for(let i =0;i<100;i++){
    x.push(i)
    y.push(10)
    let iq = parseInt(Math.random()*100)/100 // 智力值
    var r = {iq:iq ,good:0,bad:0}
    world.push( r )
}

// 基于准备好的dom，初始化echarts实例
var div =document.querySelector("#box");
var myChart = echarts.init(div);  // 帮你动态生成 canvas 标签
// 指定图表的配置项和数据
var option = {
    title: {
        text: '幸运模型'
    },
    tooltip: {},
    legend: {
        data:['财富']
    },
    xAxis: {
        data: x
    },
    yAxis: {},
    series: [{
        name: '财富',
        type: 'bar',
        data: y
    }]
};


//随机事件 500次
var key = setInterval(()=>{
    //随机找人 0-99
    let k = parseInt( Math.random()*100 )
    if(ci%2==0){  //好运
        y[k] = y[k] * 2 * world[k].iq;
        world[k].good++
    }else{  //倒霉
        y[k] = y[k]/2
        world[k].bad++
        if(y[k]<=1){
            y[k]= 10
        }
    }
    ci++;
    h1.innerHTML = '运气和财富 '+ ci;
    if(ci>=500){
       ci = 0;
       year++;
       option.title.text = '幸运模型 '+ year + ' 年'
       if(year>=40){
          clearInterval(key)
          y =  y.map( v=> parseInt(v))
       }
       // 把数据画到 图表上
       myChart.setOption(option);
    }

},1)

</script>
</html>